<!-- 开发部：物料颜色定义 蹇泽阳 -->
<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :searchImg="false" />
    <div class="flex mt10" style="width: 100%; background-color: white">
      <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
        <div class="flex">
          <h1 class="f16">色系定义</h1>
          <JDialog :tableHeader="tableHeader" :tableData="tableData" :width="40" @confirm="dialogConfirm" @removeOne="removeOne"></JDialog>
        </div>

        <Table
          :tableHeader="tableHeader"
          :tableData="tableData"
          class="mt10"
          @currentRow="currentRow"
          :getTableList="getTableList"
          @confirmChange="confirmChange"
        />
      </el-card>
      <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
        <div class="flex">
          <h1 class="f16">颜色定义</h1>
          <JDialog :tableHeader="tableHeader2" :tableData="tableData2" :width="40" @confirm="dialogConfirm2" @removeOne="removeOne2"></JDialog>
        </div>
        <Table
          :tableHeader="tableHeader2"
          :tableData="tableData2"
          class="mt10"
          :getTableList="currentRow"
          @confirmChange="confirmChange2"
          @currentRow="currentRow2"
        />
      </el-card>
    </div>
    <el-card shadow="never" :body-style="{ padding: '5px' }">
      <PageModule :PageData="{ total, buttonS: true }" @pageSizeChange="handleSizeChange" @pageChange="handleCurrentChange" />
    </el-card>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { ElMessage } from 'element-plus'
import service from '@/utils/request'
import { debounce } from 'lodash'
import { onMounted, watch } from 'vue'
import LoginWork from '@/utils/LoginWork'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'BoringColor'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
const tableHeader = ref([
  {
    change: true,
    label: '编号',
    prop: 'colorCode',
    width: '76'
  },
  {
    label: '色系',
    prop: 'colorName',
    width: '160'
  }
])
const tableHeader2 = ref([
  {
    change: true,
    label: '编号',
    prop: 'colorCode',
    width: '76'
  },
  {
    label: '颜色',
    prop: 'colorName',
    width: '160'
  }
])

const tableData = ref<any>([])
const tableData2 = ref<any>([])
const isLoading = ref(true)

// 分页器
const currentPage = ref(1)
const pageSize = ref(40)
const total = ref(0)
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getTableList()
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getTableList()
}
// 获取表数据
const getTableList = debounce(async () => {
  isLoading.value = true
  let tableDataList = await service.get<any, any>(`/material/mtl/color/mtlHueDesign?choose=${1}`)
  isLoading.value = false
  tableData.value = tableDataList.list.map((item: any) => {
    item.change = 'Y'
    return item
  })
  currentRow()
}, 500)

onMounted(() => {
  getTableList()
})

// 点击表给另一张表传数据
const currentTableRow = ref<any>({})
const currentRow = async (row: any = tableData.value[0] ? tableData.value[0] : {}) => {
  currentTableRow.value = row
  let { colorName }: any = row
  // 给表二传指令号
  let tableDataList = await service.get<any, any>(
    `/material/mtl/color/mtlHueDesign?colorName=${colorName}&choose=${2}&pageNum=${currentPage.value}&pageSize=${pageSize.value}`
  )
  tableData2.value = tableDataList.list.map((item: any) => {
    item.change = 'Y'
    return item
  })
  total.value = tableDataList.total
}
const currentTableRow2 = ref<any>({})
const currentRow2 = async (row: any = tableData.value[0]) => {
  currentTableRow2.value = row
}
// 色系定义新增
const dialogConfirm = async (obj: any, dialogVisible: any) => {
  const res = (await LoginWork.post(`/material/mtl/color/updateHueDesign?choose=${1}`, obj)) as any
  if (res.code === 200) {
    JMessage.success('新增成功')
    dialogVisible.value = false
    getTableList()
  } else {
    JMessage.error('新增失败')
  }
}

// 修改后点击确定按钮
const confirmChange = async (row: any, fn: any) => {
  const res = (await LoginWork.post(`/material/mtl/color/updateHueDesign?choose=${1}`, row)) as any
  if (res.code === 200) {
    JMessage.success('修改成功')
    fn()
  } else {
    JMessage.error('修改失败')
  }
}
// 删除
const removeOne = async () => {
  const res = (await LoginWork.post(`/material/mtl/color/updateHueDesign?choose=${5}`, currentTableRow.value)) as any
  if (res.code === 200) {
    JMessage.success('删除成功')
    getTableList()
  } else {
    JMessage.error('删除失败')
  }
}

const dialogConfirm2 = async (obj: any, dialogVisible: any) => {
  if (obj.colorCode.slice(0, 1) !== currentTableRow.value.colorCode) {
    JMessage.error('首位需同色系编码!')
    return
  }
  if (obj.colorCode.length !== 4) {
    JMessage.error('必须要四位数')
    return
  }
  const res = (await LoginWork.post(`/material/mtl/color/updateHueDesign?choose=${2}&colorName=${currentTableRow.value.colorName}`, obj)) as any
  if (res.code === 200) {
    JMessage.success('新增成功')
    dialogVisible.value = false
    getTableList()
  } else {
    JMessage.error(res.message)
  }
}
const confirmChange2 = async (row: any, fn: any) => {
  const res = (await LoginWork.post(`/material/mtl/color/updateHueDesign?choose=${4}&colorName=${currentTableRow.value.colorName}`, row)) as any
  if (res.code === 200) {
    JMessage.success('修改成功')
    fn()
  } else {
    JMessage.error('修改失败')
  }
}
// 删除
const removeOne2 = async () => {
  const res = (await LoginWork.post(
    `/material/mtl/color/updateHueDesign?choose=${6}&colorName=${currentTableRow.value.colorName}`,
    currentTableRow2.value
  )) as any
  if (res.code === 200) {
    JMessage.success('删除成功')
    currentRow()
  } else {
    JMessage.error('删除失败')
  }
}
</script>

<style lang="less" scoped></style>
